<template>
  <div class="goods-brief">
    <!-- 头部卡片 -->
    <div class="card-header">
      <div class="card-left">
        <img v-lazy="brief.skuImage" :key="brief.skuImage" alt="加载中">
      </div>
      <div class="card-right">
        <h4 class="line2">{{brief.skuName}}</h4>
        <p class="line2 recommend">推荐理由 : {{brief.recReason}}</p>
        <div class="card-leaf">
          <!-- <div class="card-hot-sell" v-for="item in brief.tags" :key="item.id">{{item.name}}</div> -->
          <div class="card-hot-book">{{brief.origin}}</div>
        </div>
        <!-- 价格和累计销量 -->
        <div class="card-price-sale">
          <div class="card-price"><span>价格</span><span><b> ￥</b> {{brief.price}}</span></div>
          <p class="card-sale"><span>累计销量</span><span>{{brief.sales}}</span></p>
        </div>
        <!-- 下单链接和加入收藏 -->
        <div class="link-wrapper">
          <!-- <a class="place-order-link" href="https://item.jd.com/100010617232.html"> -->
          <a class="place-order-link" :href="brief.address">
            <i class="iconfont icon-place-order-link"></i>
            <span>下单链接</span>
          </a>
          <div class="join-collect-link" @click="joinCollect" :class="brief.collection ? 'active' :''">
            <i class="iconfont icon-collect" :style = "{color: brief.collection ? 'red' :'white'}"></i>
            <span>{{brief.collection ? '取消收藏' :'加入收藏'}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
   props:{
    brief:{
      type:Object,
      default:() =>{
        return {}
      }
    }
  },
  data () {
    return {
      isJoinCollect:false,
      userId:null,
      goodsId:this.$route.query.id
    }
  },
  mounted() {
    this.userId = localStorage.getItem('userid');
    // if(this.userId){
    //   this.joinCollectInterface();
    // }
  },
  methods: {
    // 下单链接
    placeOrder() {
      // 未来会跳转到下单页面
      console.log("下单链接")
      let goodsId = this.brief.goodsId || null;
      if(goodsId) {
        this.$router.push({
          path:'/placeOrder',
          query:{goodsId}
        })
      }
    },
    //加入收藏
    joinCollect(){
      this.brief.collection = !this.brief.collection;
      if(this.brief.collection){
        this.joinCollectInterface();
        console.log("加入")
      } else {
        this.cancelCollectInterface();
        console.log("取消")
      }
      this.$emit("sendJoinCollect")
    },
     // 加入收藏接口 false为加入收藏字样 实际已取消了收藏,true为取消收藏字样，实际为加入了收藏
    joinCollectInterface(){
      let params = {
        goodsId:this.goodsId,
        userid:this.userId,
      }
      this.loading = true;
      this.$axios.$post('HotJoinCollect',params).then(res => {
        this.loading = false;
        if(res.status === 200){
          this.brief.collection = true;
        }else{
          // this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        // this.$message.warning('请求失败');
        this.loading = false;
      })
    },
    cancelCollectInterface() {
      let params = {
        goodsId:this.goodsId,
        userid:this.userId,
      }
      this.loading = true;
      this.$axios.$post('HotcancelCollect',params).then(res => {
        this.loading = false;
        if(res.status === 200){
          this.brief.collection = false;
        }else{
          // this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        // this.$message.warning('请求失败');
        this.loading = false;
      })
    }
  },
  computed: {
  },
  watch:{

  },
  beforeDestory() {
  }
}
</script>

<style scoped>
  .card-header{
    display:flex;
    height:350px;
    border-radius:4px;
    background-color: #21232e;
    border:2px solid #383a43;
    box-sizing:border-box; 
  }

/* 头部卡片左边 */
.card-left{
  width:350px;
  height:350px;
  flex-shrink:0;
  border-radius:6px;
  overflow:hidden;
}
.card-left img{
  width:100% !important;
  height:100% !important;
  display:block;
}
/* 头部卡片右边 */
.card-right{
  flex-grow:2;
  height:350px;
  padding:0 13% 0 5.5%;
  box-sizing:border-box;
  border-left:none;
  flex-grow:1;
}
.card-right h4{
  margin-top:30px;
  box-sizing:border-box;
  color:#ffffff;
  font-size: 18px;
}
.card-right p.recommend{
  padding-top:18px;
  box-sizing:border-box;
  color:#bcbcbe;
  font-size: 16px;
}
.card-leaf{
  display:flex;
  margin-top:18px;
  font-size: 14px;
  color:#ffffff;
}
.card-hot-sell,
.card-hot-book{
  width: 80px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius:0 16px 0 16px;
  background-image: linear-gradient(to right,#cd3b3d,#cf533d,#d06d3e);
}
.card-hot-sell{
  margin-right:13px;
}
.card-hot-book{
  margin-right:13px;
  background-image: linear-gradient(to right,#d2263f,#cc3563,#c5478c);
}
/* 价格和累计销量 */
.card-price-sale {
  height:100px;
  line-height:100px;
  display:flex;
  align-items: center;
  background-color: #2b2f3c;
  margin-top:20px;
  border-radius:4px;
}
.card-price{
  width:270px;
  padding-left:40px;
  box-sizing:border-box;
  font-size: 16px;
}
.card-price span:nth-child(1),
.card-sale span:nth-child(1){
  margin-right:14px;
  color:#bcbcbe;
}
.card-price b {
  font-size: 18px;
}
.card-price span:nth-child(2),
.card-sale span:nth-child(2){
  color:#ffffff;
  font-weight:bold;
  font-size: 26px;
}
/* 下单链接和加入收藏 */
.link-wrapper{
  display:flex;
  height:60px;
  line-height: 60px;
  text-align: center;
  margin-top:22px;
  border-radius:4px;
  color:#ffffff;
  font-size: 18px;
}
.place-order-link,
.join-collect-link{
  flex-basis:50%;
  height: 60px;
  margin-right:31px;
  background-image: linear-gradient(to left,#0099ff,#00ccff);
  cursor:pointer;
  border-radius:4px;
  user-select:none;
  color: #ffffff;
}
.place-order-link:hover,
.join-collect-link:hover{
  background-image: linear-gradient(to left,#ff7800,#f7ad3a);
}
.link-wrapper .active{
  background-image: linear-gradient(to left,#ff7800,#f7ad3a);
}
.join-collect-link{margin-right:0; background-image: linear-gradient(to left,#f60,#f0f);}
.place-order-link i,
.join-collect-link i{
  font-size: 30px;
  vertical-align: middle;
  font-weight: 560;
}
</style>
